<!--
 * @Author: your name
 * @Date: 2021-04-08 11:12:55
 * @LastEditTime: 2021-05-21 12:20:47
 * @LastEditors: Please set LastEditors
 * @Description: 折线图 样式2 阴影
 * @FilePath: /medicine-web/src/components/Charts/LineShadowChart.vue
-->
<template>
  <div class="line-chart-container">
    <div :id="elementId" style="height: 360px;"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'lineShadowChart',
  data () {
    return {}
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      var myChart = echarts.init(document.getElementById(this.elementId))
      myChart.setOption({
        title: {
          text: this.chartTitle,
          textStyle: {
            color: '#555555',
            fontSize: 14,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter(params) {
            return params[0].name + ':' + params[0].data
          }
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '30px',
          containLabel: true
        },
        legend: {
          show: false
        },
        graphic: {
          elements: [
            {
              type: 'text',
              right: '40px',
              top: '5px',
              style: {
                fill: '#555555',
                text: '单位__条',
                font: '0.875em "Microsoft YaHei", sans-serif',
                textAlign: 'center'
              }
            }
          ]
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: this.getXAxis(),
          axisLine: {
            lineStyle: {
              color: '#D8D8D8'
            }
          },
          axisLabel: {
            interval: 0,
            color: '#ACACAC'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: ['#E6E6E6']
            }
          }
        },
        visualMap: [
          {
            show: false,
            type: 'continuous',
            min: 0,
            max: 1000,
            color: ['#77D1FF', '#C590FF']
          }
        ],
        series: [
          {
            name: '',
            data: this.getData(),
            type: 'line',
            smooth: true,
            symbol: 'path://M597.333333 1024a512 512 0 1 1 512-512 512 512 0 0 1-512 512z m0-914.2784A402.2784 402.2784 0 1 0 999.611733 512 402.2784 402.2784 0 0 0 597.333333 109.7216zM597.333333 768a256 256 0 1 1 256-256 256 256 0 0 1-256 256z m0-402.2784A146.2784 146.2784 0 1 0 743.611733 512 146.2784 146.2784 0 0 0 597.333333 365.7216z',
            symbolSize: 16,
            label: {
              show: true,
              color: '#97ADF6'
            },
            lineStyle: {
              width: 4,
              shadowBlur: 10,
              shadowOffsetY: 8
            }
          }
        ]
      })
    },
    getXAxis () {
      return this.chartData.map(item => item.name)
    },
    getData () {
      return this.chartData.map(item => item.data)
    }
  },
  watch: {
    chartData (val, old) {
      this.initChart()
    }
  },
  props: {
    elementId: {
      type: String,
      default: ''
    },
    chartTitle: {
      type: String,
      default: ''
    },
    chartData: {
      type: Array,
      default: () => []
    }
  }
}
</script>
<style lang="scss" scoped>
.line-chart-container {
  box-shadow: 5px 5px 6px #ccc;
  border-radius: 5px;
}
</style>